<script setup lang="ts">
// App.vue 现在作为路由容器
import NaiveUIProvider from './components/NaiveUIProvider.vue'
</script>

<template>
  <div id="app">
    <!-- 使用 Naive UI 全局提供者组件 -->
    <NaiveUIProvider>
      <!-- 路由视图 -->
      <router-view />
    </NaiveUIProvider>
  </div>
</template>

<style>
/* 全局主题过渡效果 */
:root {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 亮色主题 */
:root.light {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 暗色主题 */
:root.dark {
  --bg-color: #18181c;
  --text-color: #ffffff;
}

/* 应用到 body */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

#app {
  min-height: 100vh;
  transition: background-color 0.3s ease;
}
</style>
